<template>
	<view class="content">
	<view class="top-bar">
		<view class="top-bar-left" @tap="myInfo()">
			<image @tap="myInfo()" :src="userInfo.profilePhoto" class="profilePhoto"></image>
		</view>
		<view class="top-bar-center">
		<view class="title" v-show="$store.state.newMsgCount!=0">
			尬聊({{$store.state.newMsgCount}})
		</view>
		<view class="title" v-show="$store.state.newMsgCount==0">
			尬聊
		</view>
		</view>
		<view class="top-bar-right">
		<view class="search" @tap="toSearch()">
			<image src="../../static/images/index/searchSmall.png" ></image>
		</view>
		<view class="add" @tap="createGroup()">
			<image src="../../static/images/index/add.png"></image>
		</view>
		</view>
	</view>
	<view class="main">
<!-- 	<view class="apply">
	</view> -->
	<!-- <view class="friends" @tap="toFriendRequest()">
		<view class="friend-list">
			<view class="friend-list-l">
			<text class="tip" >1</text>
				<image src="../../static/images/chatroom/apply.png"></image>
			</view>
			<view class="friend-list-r">
				<view class="top">
					<view class="name">
						好友申请
					</view>
					<view class="time">
						12:42
					</view>
				</view>
				<view class="info">
				茫茫人海，相聚便是缘分
				</view>
			</view>
		</view>
	</view> -->
	<view class="friends" v-for="(item,index) in getDialogList" :key="index" @tap="toChat(item)" >
		<view class="friend-list">
			<view class="friend-list-l">
			<text class="tip" v-if="item.tip>0">{{item.tip}}</text>
				<image :src="item.profilePhoto"></image>
			</view>
			<view class="friend-list-r">
				<view class="top" >
					<view class="name">
						{{item.nickname}}
					</view>
					<view class="time" v-show="item.time!=''">
						{{changeTime(item.time)}}
						<!-- 12:42 -->
					</view>
				</view>
				<view class="info">
				{{item.message}}
				</view>
			</view>
		</view>
	</view>
	</view>
	</view>
</template>

<script>
	import data from '../../commons/js/data.js'
	import myTime from '../../commons/js/myfun.js'
	import request from '../../api/request.js';
	import { mapGetters } from 'vuex';
	export default {
		data() {
			return {
			friendList:[],
			userInfo:{},
			chatType:''
			}
		},
		 onShow() {
				this.$store.commit("changNewMsgCount")
				this.userInfo =this.$store.getters.getUser
				this.$store.dispatch('conenct',uni.getStorageSync("userInfo").username);
					//获取用户资料
					// let res = await request({
					// 	url: '/user/info/'+uni.getStorageSync("userInfo").username,
					// 	method: 'GET'
					// });
					// res = res[1].data
					// this.userInfo  = res.data;
				//	console.log(res)
		},
		onLoad() {
			console.log("开始啦!")
			//this.userInfo = 
			//console.log(this.userInfo)
			if(uni.getStorageSync("userInfo") == ''){
				console.log("未登录!")
				uni.navigateTo({
					url:"../login/login"
				})
			}
			else{
				console.log("已登录!")
				this.$store.dispatch('getUserInfo');
				//this.userInfo =this.$store.getters.getUser
				//console.log(this.userInfo)
				this.$store.commit("changeUser", uni.getStorageSync("userInfo"))
				this.userInfo =this.$store.getters.getUser
				this.$store.commit("changeDialogueList", uni.getStorageSync("dialogueList"))
				this.$store.commit("changeChatHistory", uni.getStorageSync("chatHistory"))
				this.$store.dispatch('getFriends');
				
				//this.userInfo =this.$store.getters.getUser
			}
			
			
			
		},
		computed: {
			...mapGetters(['getSingleNotifi', 'getNotifySum', 'getDialogList'])
		},
		methods: {
	
			changeTime:function(date){
				return myTime.dateTime(date);
			},
			toSearch(){
				uni.navigateTo({
					url:"../search/search"
				})
			},
			myInfo(){
				uni.navigateTo({
					url:"../userDetail/userDetail"
				})
			},
				
			toFriendRequest(){
				uni.navigateTo({
					url:"../friendRequest/friendRequest"
				})
			},
			toChat(friend){
				if(friend.username != 'All'){
					this.chatType = 'private'
				}
				else{
					this.chatType = 'public'
				}
				console.log(friend.username)
				friend.tip = 0;
				uni.navigateTo({
					url:"../chartroom/chartroom?from="+this.userInfo.username+"&to="+friend.username+"&nickname="+friend.nickname+"&chatType="+this.chatType,
				})
			},
			toPublicCharRoom(){
				uni.navigateTo({
					url:"../chartroom/chartroom?from="+this.userInfo.username+"&to=所有人&chatType=public"
				})
			},
			createGroup(){
				uni.navigateTo({
					url:"../buildgroup/buildgroup"
				})
			}
		}
	}
</script>

<style lang="scss">
	@import "../../commons/css/mycss.scss";
	// .content{
	// 	display: flex;
	// 	flex-direction: column;
	// 	align-items: center;
	// 	justify-content: center;
	// 	padding-top: var(--status-bar-height);
	// }
	.top-bar{
		background: rgba(255,255,255,0.96);
		border-bottom: 1px solid $uni-border-color;
		.top-bar-right{
			image{
				padding: 18rpx 0 0 18rpx;
				width: 42rpx;
				height: 42rpx;
			}
		}
	}
	//临时添加
	.profilePhoto{
		margin-top: 11rpx;
	}
	.main{
		padding-top: 104rpx;
		// border:1px solid red;
		width: 100%;
		box-sizing: border-box;
	}
	.friend-list{
			padding: 16rpx $uni-spacing-col-base ;
			height: 96rpx;
			&:active{
				background-color: $uni-bg-color-grey;
			}
		.friend-list-l{
			float: left;
			position: relative;
			image{
				// float: left;
				width: 96rpx;
				height: 96rpx;
				border-radius: $uni-border-radius-base;
				background-color: $uni-color-primary;
			}
			.tip{
				position: absolute;
				z-index: 10;
				top:-8rpx;
				left: 68rpx;
				min-width: 20rpx;
				height: 36rpx;
				background: $uni-color-warning;
				padding: 0 6rpx;
				border-radius: 18rpx;
				font-size: $uni-font-size-sm;
				color: $uni-text-color-inverse;
				line-height: 36rpx;
				text-align: center;
			}
		}
		.friend-list-r{
			padding-left:128rpx;
			border-bottom: 0.4px solid $uni-border-color;
			padding-bottom: 20rpx;
			.top{
				height: 50rpx;
				.name{
					float: left;
					font-size: 36rpx;
					color: $uni-text-color;
					font-weight: 400;
					line-height: 50rpx;
				}
				.time{
					float: right;
					font-size: $uni-font-size-sm;
					color: $uni-text-color-disable;
					line-height: 50rpx;
				}
			}
		}
		.info{
			font-size: $uni-font-size-base;
			color: $uni-text-color-grey;
			line-height: 40rpx;
			display: -webkit-box;
			 -webkit-box-orient:vertical;
			 -webkit-line-clamp:1;
			 overflow: hidden;
		}
	}
</style>